<template>
  <el-dialog @close="handleClose" :title="$t('common.manage_country_config')" width="40%">
    <el-form ref="form" :model="form" label-position="top">
      <!--      <el-form-item-->
      <!--        v-for="countryList in countries"-->
      <!--        :key="countryList.continent"-->
      <!--        :label="$t('country_or_region.' + countryList.continent)">-->
      <!--        <el-checkbox-group-->
      <!--          v-model="countryCheckList"-->
      <!--        >-->
      <!--          <el-checkbox-->
      <!--            v-for="country in countryList.countries"-->
      <!--            :key="country.countryCode3"-->
      <!--            :label="$t('country_or_region.' + country.countryCode3)"-->
      <!--          ></el-checkbox>-->
      <!--        </el-checkbox-group>-->
      <!--      </el-form-item>-->
      <el-form-item :label="$t('contact.country_or_region')" prop="manageCountry">
        <el-select
          v-model="form.manageCountry"
          multiple
          default-first-option
          filterable
          class="w-full"
        >
          <el-option
            v-for="area in countries"
            :key="area.countryCode3"
            :value="area.countryCode3"
            :label="$t('country_or_region.' + area.countryCode3)"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button text @click="handleClose">{{ $t("common.cancel") }}</el-button>
        <el-button
          type="primary"
          :loading="saveManageCountryLoading"
          @click="saveManageCountry"
          >{{ $t("common.confirm") }}</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {
  getCountryList,
  getUserManagerCountries,
  saveUserManagerCountries,
} from "@/api/user";

export default {
  data() {
    return {
      visible: false,
      userId: "",
      // [AF]非洲, [EU]欧洲, [AS]亚洲, [OA]大洋洲, [NA]北美洲, [SA]南美洲, [AN]南极洲
      // countries: [
      //   { continent: 'EU', countries: [] },
      //   { continent: 'AS', countries: [] },
      //   { continent: 'OA', countries: [] },
      //   { continent: 'NA', countries: [] },
      //   { continent: 'SA', countries: [] },
      //   { continent: 'AF', countries: [] }
      // ],
      countries: [
        { countryCode3: "EU" },
        { countryCode3: "AS" },
        { countryCode3: "OA" },
        { countryCode3: "NA" },
        { countryCode3: "SA" },
        { countryCode3: "AF" },
      ],
      countryCheckList: [],
      confirmLoading: false,
      saveManageCountryLoading: false,
      listLoading: false,
      form: {
        manageCountry: [],
      },
    };
  },
  created() {},
  mounted() {
    this.getCountryList();
  },
  methods: {
    init(userId) {
      this.userId = userId;
      this.fetchData();
    },
    getCountryList() {
      getCountryList().then((data) => {
        // this.countries = data
        // data.map(item => {
        //   this.countries.map(countryList => {
        //     if (item.continent === countryList.continent) {
        //       countryList.countries.push(item)
        //     }
        //   })
        // })
        data.map((item) => {
          // 去除‘全球选项’
          if (item.countryCode3 !== "000") {
            this.countries.push(item);
          }
        });
      });
    },
    cancel() {
      this.$emit("update:model-value", false);
    },
    fetchData() {
      this.listLoading = true;
      getUserManagerCountries(this.userId)
        .then((res) => {
          this.listLoading = false;
          if (res) {
            res.forEach((item) => {
              this.form.manageCountry.push(item.countryCode);
            });
          }
        })
        .catch((e) => {
          this.listLoading = false;
        });
    },
    handleClose() {
      this.userId = "";
      this.form.manageCountry = [];
      this.$emit("update:model-value", false);
      this.confirmLoading = false;
    },
    saveManageCountry() {
      this.$confirm(this.$t("user.set_manage_country_tip"), "", {
        confirmButtonText: this.$t("common.confirm"),
        cancelButtonText: this.$t("common.cancel"),
        type: "warning",
      }).then(() => {
        const entity = {
          countries: this.form.manageCountry,
        };
        this.saveManageCountryLoading = true;
        saveUserManagerCountries(this.userId, entity)
          .then((data) => {
            if (data) {
              this.saveManageCountryLoading = false;
              this.userId = "";
              this.form.manageCountry = [];
              this.$message.success(this.$t("common.operate_success"));
              this.$emit("update:model-value", false);
            }
          })
          .catch((e) => {
            this.$confirmError(e);
            this.saveManageCountryLoading = false;
          })
          .finally(() => {
            this.saveManageCountryLoading = false;
          });
      });
    },
  },
};
</script>
